<template>
    <view style="height: 100%">
        <textarea class="w100 h180 f14 c28" :value="content" @input="onInput" placeholder="请填写说明" placeholder-class="cc"></textarea>

        <ul class="mt15 df ac fw">
            <image class="img72 mt8 mr8" src="https://cdn.xtwaixie.com/uploads/20240705/17201796916687dbebafc4e.png" @tap="upImgArr" />
            <block v-for="(item, index) in show_img" :key="index">
                <view class="img72 mt8 mr8 pr">
                    <image class="del img-del" src="https://wx.xtwaixie.com/img/del.png" @tap="onDel" :data-i="index"></image>
                    <image class="img72 br8"  referrerPolicy='no-referrer' :src="item" />
                </view>
            </block>
        </ul>

        <p class="db mt10 f12 c9">*每次可提交2张截图，每日仅可以提交1次。</p>

        <view class="mt40">
            <button class="sub" @tap="onSub">提交</button>
        </view>
    </view>
</template>

<script>
const http = require('../../utils/http');
export default {
    data() {
        return {
            content: '',
            path_img: [],
            show_img: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 删除图片
        onDel(e) {
            let i = e.currentTarget.dataset.i;
            this.path_img.splice(i, 1);
            this.show_img.splice(i, 1);
            this.setData({
                path_img: this.path_img,
                show_img: this.show_img
            });
        },

        onSub() {
            if (this.path_img.length > 2) {
                uni.showToast({
                    title: '最多上传2张截图',
                    icon: 'none'
                });
                return false;
            }
            let data = {
                content: this.content,
                image: this.path_img
            };
            http.request('user/shareRecordAdd', data)
                .then((res) => {
                    setTimeout(() => {
                        uni.reLaunch({
                            url: '/pages/share/shareSucc'
                        });
                    }, 1000);
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        onInput(e) {
            this.setData({
                content: e.detail.value
            });
        },

        //  上传照片
        upImgArr() {
            let that = this;
            uni.chooseImage({
                count: '2',
                success(res) {
                    for (var i = 0; i < res.tempFilePaths.length; i++) {
                        let img = res.tempFiles[i].path;
                        http.upLoadFile('base/uploadImg', 'image', res.tempFilePaths[i], {})
                            .then((res) => {
                                that.path_img.push(res.data.url);
                                that.show_img.push(img);
                                that.setData({
                                    path_img: that.path_img,
                                    show_img: that.show_img
                                });
                            })
                            .catch((res) => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none'
                                });
                            });
                    }
                },
                fail() {}
            });
        }
    }
};
</script>
<style>
@import './shareSub.css';
</style>
